<template>
  <div class="container">
    <div class="main">
      <div class="header">
        <el-button type="primary" @click="add">新建</el-button>
        <el-button type="success" @click="importData">导入</el-button>
        <el-button type="warning" @click="edit">编辑</el-button>
        <el-select v-model="selectedFilter" placeholder="请选择状态" style="width: 200px;">
          <el-option label="启用" value="enabled"></el-option>
          <el-option label="禁用" value="disabled"></el-option>
        </el-select>
        <el-input placeholder="请输入关键字搜索" v-model="searchTable" style="width: 200px;" />
        <el-button type="info" @click="query">查询</el-button>
        <el-button type="info" @click="query">重置</el-button>
      </div>
      <el-table :data="filteredTableData" border class="eltable">
        <el-table-column type="index"  label="序号" width="80"></el-table-column>
        <el-table-column prop="bom_code" label="BOM编码" width="160">
          <template #default="{ row }">
            <el-button type="text" @click="showBOMDetails(row)">{{ row.bom_code }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="bom_name" label="BOM名称"></el-table-column>
        <el-table-column prop="bom_bb" label="BOM版本"></el-table-column>
        <el-table-column prop="bom_fl" label="BOM分类"></el-table-column>
        <el-table-column prop="cp_code" label="产品编码" width="160"></el-table-column>
        <el-table-column prop="cp_name" label="产品名称"></el-table-column>
        <el-table-column prop="cp_fl" label="产品分类"></el-table-column>
        <el-table-column prop="cp_xh" label="产品型号"></el-table-column>
        <el-table-column prop="cp_lx" label="产品类型"></el-table-column>
        <el-table-column prop="bom_mr" label="默认BOM">
          <template #default="{ row }">
            <el-switch :model-value="row.bom_mr === 1"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="bom_state" label="启用">
          <template #default="{ row }">
            <el-switch :model-value="row.bom_state === 1" ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button type="text" @click="editRow(row)">编辑</el-button>
            <el-button type="text" @click="deleteRow(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
        :total="totalItems" layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { ref, defineComponent, computed } from 'vue'; 
import axios from 'axios';
import { ElMessage, ElLoading } from 'element-plus';
export default {
  setup() {
    const searchKey = ref('');
    const treeData = ref([]);
    const defaultProps = {
      children: 'children',
      label: 'label',
    };

    const tableData = ref([]);

    const selectedFilter = ref('');
    const searchTable = ref('');
    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalItems = ref(0);

    // 获取数据
    const fetchData = async () => {
      try {
        let url = `/api/Mbd_BOM/GetMbd_BOM`;
        const res = await axios.get(url);
        tableData.value = res.data;
        totalItems.value = tableData.value.length;
      } catch (error) {
        console.error('Error fetching tableData:', error);
        ElMessage.error('数据获取失败');
      }
    };
    const filteredTableData = computed(() => {
      let data = tableData.value;
      // 分页  
      const start = (currentPage.value - 1) * pageSize.value;
      return data.slice(start, start + pageSize.value);
    });
    //显示bom详情
    const showBOMDetails = (row) => {
       ElMessage.error(row.bom_code)
    };
    const add = () => {
      // 添加逻辑  
    };

    const edit = () => {
      // 编辑逻辑  
    };

    const importData = () => {
      // 导入逻辑  
    };

    const query = () => {
      // 查询逻辑  
      console.log('Querying with:', searchTable.value);
    };

    const editRow = (row) => {
      // 编辑行逻辑  
      console.log('Editing row:', row);
    };

    const deleteRow = (row) => {
      // 删除行逻辑  
      console.log('Deleting row:', row);
    };

    const handleCurrentChange = (page) => {
      currentPage.value = page;
      // 分页逻辑  
      console.log('Current page:', page);
    };
    fetchData();
    // 确保所有函数都被返回  
    return {
      filteredTableData,
      fetchData,
      searchKey,
      treeData,
      defaultProps,
      tableData,
      selectedFilter,
      searchTable,
      currentPage,
      pageSize,
      totalItems,
      add,
      edit,
      importData,
      query,
      editRow,
      deleteRow,
      handleCurrentChange,
      showBOMDetails
    };
  },
};
</script>

<style>
.container {
  display: flex;
  gap: 20px;
  height: 95%;
}

.sidebar {
  height: 100%;

}

.main {
  width: 80%;
  flex: 1;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.eltable {
  height: 95%;
  background-color: rgba(255, 255, 255, 0.5); /* 设置表格背景色为白色，并带有50%的透明度 */
}

.letree {
  height: 100%;
}
</style>